<template>
	<div class="mine-profitcore-index-wrap">
		<van-nav-bar title="收益中心" left-arrow fixed @click-left="onClickLeft" />
		
		<div 
		:style="{
			background: `url(${levelConfig.bg}) no-repeat center`,
		}"
		class="profit-box" >
		</div>
		<div
		:style="{
			background: `url(${levelConfig.minBg}) no-repeat center`,
			color: profitCore.level === 100 ? '#7A1000' : levelConfig.color
		}"
		class="profit-box-min" >
			<div 
			:style="{
				backgroundColor: levelConfig.color,
			}"
			class="my-level" >当前级别：{{ profitCore.level_name }}</div>
			
			<div class="profit-ul" >
				<div class="profit-li" >
					<div class="profit-li-val" >{{ profitCore.balance }}</div>
					<div class="profit-li-label" >我的余额（元）</div>
				</div>
				<div class="profit-li" >
					<div class="profit-li-val" >{{ profitCore.subsidy }}</div>
					<div class="profit-li-label" >补贴金额（元）</div>
				</div>
				<div class="profit-li" >
					<div class="profit-li-val" >{{profitCore.bonus_zj}}</div>
					<div class="profit-li-label" >创客奖金（元）</div>
				</div>
				<div class="profit-li" >
					<div class="profit-li-val" >{{ profitCore.bonus_hhr }}</div>
					<div class="profit-li-label" >合伙人奖金（元）</div>
				</div>
			</div>
			
			<div 
			:style="{
				backgroundColor: levelConfig.color,
			}"
			class="widthdaw-btn active-btn" @click="getWithdrawal" >提现</div>
			
		</div>
		
		<div class="profit_core_ist">
			<van-cell title="我的级别" icon="location-o" is-link @click="getLevel">
				<template #icon>
					<img src="../../../images/mine/pofit-icon-1.png" class="custom-icon" />
				</template>
				<template #right-icon>
					<img class="arrow-icon" :src="arrowIcon" >
				</template>
			</van-cell>
			<van-cell title="补贴明细" icon="location-o" is-link @click="getSubsidy">
				<template #icon>
					<img src="../../../images/mine/pofit-icon-2.png" class="custom-icon" />
				</template>
				<template #right-icon>
					<img class="arrow-icon" :src="arrowIcon" >
				</template>
			</van-cell>
			<van-cell title="余额明细" icon="location-o" is-link @click="getBalanceDetail">
				<template #icon>
					<img src="../../../images/mine/pofit-icon-3.png" class="custom-icon" />
				</template>
				<template #right-icon>
					<img class="arrow-icon" :src="arrowIcon" >
				</template>
			</van-cell>
			<van-cell title="我的软件" icon="location-o" is-link @click="getMySoftware">
				<template #icon>
					<img src="../../../images/mine/pofit-icon-4.png" class="custom-icon" />
				</template>
				<template #right-icon>
					<img class="arrow-icon" :src="arrowIcon" >
				</template>
			</van-cell>
			<van-cell title="商家推广" icon="location-o" is-link @click="getExtension" >
				<template #icon>
					<img src="../../../images/mine/pofit-icon-5.png" class="custom-icon" />
				</template>
				<template #right-icon>
					<img class="arrow-icon" :src="arrowIcon" >
				</template>
			</van-cell>
			<van-cell title="联盟商家" icon="location-o" is-link @click="getUnionBusiness" v-if="profit.alliance_status>=1">
				<template #icon>
					<img src="../../../images/mine/mine-server-icon9.png" class="custom-icon" />
				</template>
				<template #right-icon>
					<img class="arrow-icon" :src="arrowIcon" >
				</template>
			</van-cell>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				arrowIcon: require('@/images/mine/profit-arrow-icon.png'),
				profitCore: JSON.parse(localStorage.getItem("profit")),
				profit:JSON.parse(localStorage.getItem("profit")),
			}
		},
		computed: {
			levelConfig() {
				switch (this.profitCore.level) {
					case 0:
						return {
							bg: require('@/images/mine/level-income-1.png'),
							minBg: require('@/images/mine/level-income-bg-1.png'),
							color: '#46606A'
						};
						break;
					case 1:
						return {
							bg: require('@/images/mine/level-income-2.png'),
							minBg: require('@/images/mine/level-income-bg-2.png'),
							color: '#32647B'
						};
						break;
					case 2:
						return {
							bg: require('@/images/mine/level-income-3.png'),
							minBg: require('@/images/mine/level-income-bg-3.png'),
							color: '#466A51'
						};
						break;
					case 3:
						return {
							bg: require('@/images/mine/level-income-4.png'),
							minBg: require('@/images/mine/level-income-bg-4.png'),
							color: '#986D3E'
						};
						break;
					case 103:
						return {
							bg: require('@/images/mine/level-income-5.png'),
							minBg: require('@/images/mine/level-income-bg-5.png'),
							color: '#6A3F38'
						};
						break;
					case 102:
						return {
							bg: require('@/images/mine/level-income-6.png'),
							minBg: require('@/images/mine/level-income-bg-6.png'),
							color: '#402C82'
						};
						break;
					case 101:
						return {
							bg: require('@/images/mine/level-income-7.png'),
							minBg: require('@/images/mine/level-income-bg-7.png'),
							color: '#343560'
						};
						break;
					case 100:
						return {
							bg: require('@/images/mine/level-income-8.png'),
							minBg: require('@/images/mine/level-income-bg-8.png'),
							color: '#DB3D1D'
						};
						break;
				}
			}
		},
		mounted() {
			console.log();
			
			window.scrollTo(0, 0)
		},
		methods: {
			onClickLeft() {
				this.$router.back()
			},
			// 提现
			getWithdrawal() {
				this.$router.push({
					path: '/withdrawal'
				})
			},
			// 我的级别
			getLevel() {
				this.$router.push({
					path: '/level'
				})
			},
			// 排队补贴
			getSubsidy() {
				this.$router.push({
					path: '/subsidy'
				})
			},
			// 余额明细
			getBalanceDetail() {
				this.$router.push({
					path: '/balanceDetail'
				})
			},
			// 我的软件
			getMySoftware() {
				this.$router.push({
					path: '/mySoftware'
				})
			},
			// 商家推广
			getExtension() {
				this.$router.push({
					path: '/extension',
					query: {
						level_name: this.profitCore.level_name
					}
				})
			},
			// 联盟商家
			getUnionBusiness() {
				this.$router.push({
					path: '/unionBusiness'
				})
			}
		},
	}
</script>
<style lang="scss">
	.mine-profitcore-index-wrap {
		min-height: 100vh;
		padding-top: 46px;
		padding-bottom: 0.6rem;
		background-color: #f4f4f4;
		box-sizing: border-box;
		.van-nav-bar .van-icon{
			color: #333333;
		}
		.van-nav-bar__arrow{
			font-size: 20px;
		}
		.van-hairline--bottom::after{
		    display: none;
		}
		
		.profit-box{
			width: 100%;
			height: 4.8rem;
			padding-top: 0.56rem;
			box-sizing: border-box;
			background-size: cover!important;
		}
		.profit-box-min{
			position: relative;
			width: 7.02rem;
			height: 5rem;
			margin: auto;
			margin-top: -4.24rem;
			background-size: cover!important;
			.my-level{
				position: absolute;
				left: 0;
				top: 0.28rem;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 0.52rem;
				padding: 0 0.2rem;
				font-weight: 400;
				font-size: 0.28rem;
				color: #FFFFFF;
				border-radius: 0 2rem  2rem 0;
			}
			.profit-ul{
				display: flex;
				flex-wrap: wrap;
				padding-top: 1.12rem;
				.profit-li{
					text-align: center;
					width: 3.4rem;
					margin-bottom: 0.4rem;
					.profit-li-val{
						height: 0.44rem;
						margin-bottom: 0.1rem;
						line-height: 0.44rem;
						font-size: 0.32rem;
						font-weight: 500;
					}
					.profit-li-label{
						height: 0.4rem;
						line-height: 0.4rem;
						font-size: 0.28rem;
						font-weight: 400;
					}
				}
				
			}
			.widthdaw-btn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 5.34rem;
				height: 0.8rem;
				margin: auto;
				font-size: 0.28rem;
				color: #FFFFFF;
				border-radius: 0.4rem;
			}
		}
	
		.profit_core_ist {
			display: flex;
			flex-direction: column;
			width: 7.02rem;
			padding: 0.08rem 0;
			margin: auto;
			margin-top: 0.24rem;
			border-radius: 0.16rem;
			overflow: hidden;
			background-color: #FFFFFF;
			/* 垂直排列 */
			.van-cell {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 8px;
				padding: 8px 16px;
				&::after{
					display: none;
				}
				&:last-child{
					margin-bottom: 0;
				}
			}
			
			.arrow-icon{
				width: 0.32rem;
				height: 0.32rem;
			}

			.custom-icon {
				width: .48rem;
				height: .48rem;
				margin-right: 0.2rem;
			}
		}
	}
</style>
